<template>
    <div class="wrapper">
        <div class="status-bar" :style="{'height': statusHeight}"></div>
        <scroller :show-scrollbar="false" class="content">
            <div class="header">
                <slider class="slider" interval="3000" auto-play="true">
                    <div v-for="img in carDetail.bannerList" v-if="carDetail.bannerList.length != 0" >
                        <image class="image" resize="contain" :src="img"  @click="openLightBox"></image>
                    </div>
                    <div v-else>
                        <image class="image" resize="contain" src="bmlocal://assets/acw/banner.jpg"></image>
                    </div>
                </slider>
                <text class="iconfont headerIcon" @click="back">&#xe601;</text>

            </div>
            <div>
                <text class="cont_title">赠送：两万公里免费质保</text>
                <text class="cont_car_name">{{carDetail.pAllname}}</text>
                <text class="cont_car_date">发布时间：{{carDetail.pAddtime}}  </text>
                <!--<text class="cont_car_date">发布时间：{{carDetail.pAddtime}}  点击：{{carDetail.pHits}}</text>-->
            </div>
            <div class="cont_price_border">
                <div class="cont_price">
                    <text class="nomal_word">车主报价</text>
                    <text class="cont_car_price1">{{carDetail.pPrice}}万</text>
                    <text class="content_third_price">{{"[首付："+Math.ceil((carDetail.pPrice)*0.07)+"万元]"}}</text>  <!--首付款7%-->

                </div>
                <!--<div class="cont_price">-->
                    <!--<text class="nomal_word">贷款</text>-->
                    <!--<text class="cont_car_price2">32.40万</text>-->
                    <!--<text class="under_staging" @click="cantuse">了解分期</text>-->
                <!--</div>-->
                <!--<div class="cont_price">-->
                    <!--<text class="nomal_word">出厂报价</text>-->
                    <!--<text>{{carDetail.pNewprice}}万 + {{carDetail.pTax}}万 (购置税)</text>-->
                <!--</div>-->
                <!-- <div class="cont_price">
                    <text class="nomal_word">您节省了</text>
                    <text>17.16万</text>
                </div> -->
                <div class="car_base_info">
                    <div class="base_info_lebal">
                        <text class="base_info_text">上牌时间</text>
                        <text class="base_info_date">{{carDetail.pYear}}年{{carDetail.pMonth}}月</text>
                    </div>
                    <div class="base_info_lebal left_line">
                        <text class="base_info_text">行驶里程</text>
                        <text class="base_info_date">{{carDetail.pKilometre}}万公里</text>
                    </div>
                    <!--<div class="base_info_lebal left_line">-->
                        <!--<text class="base_info_text">排放标准</text>-->
                        <!--<text class="base_info_date">{{carDetail.pEmission}}</text>-->
                    <!--</div>-->
                    <!--<div class="base_info_lebal left_line">-->
                        <!--<text class="base_info_text">车牌城市</text>-->
                        <!--<text class="base_info_date">{{carDetail.p1}}</text>-->
                    <!--</div>-->
                </div>
                <div class="cont_phone_share">
                    <div class="cont_pho">
                        <text class="share_text iconfont cont_phone_text" @click="callPhone('0475-8255806')">&#xe633;添美检测</text>
                    </div>
                    <div class="cont_share">
                        <!--<text class="report_text iconfont" @click="cantuse">&#xe652;举报</text>-->
                        <!--<text class="share_text iconfont" @click="cantuse">&#xe66c;分享</text>-->
                        <!--<text class="share_text iconfont" @click="cantuse">&#xe62d;收藏</text>-->
                        <text class="share_text iconfont" v-if="isShowCollection" @click="collection(carDetail.pId)">&#xe62d;已收藏</text>
                        <text class="share_text iconfont" v-if="!isShowCollection" @click="collection(carDetail.pId)">&#xe62d;收藏</text>
                    </div>
                </div>
            </div>
            <div class="middl_button">
                <text class="bargain iconfont" v-if="carDetail.p6 == 1" @click="bargain(carDetail.pId)">&#xe642;我要砍价</text>
                <text class="bargain_else" v-else></text>
                <text class="reservation iconfont"  @click="callPhone(carDetail.pTel)">&#xe610;预约看车</text>
            </div>
            <div>
                <text class="info_title">基本信息</text>
                <div class="info_border">
                    <div class="basic_info">
                        <text class="info_cont">颜色  {{carDetail.pColor}}</text>
                        <text class="info_cont">变速箱  {{carDetail.pTransmission}}</text>
                        <!--<text class="info_cont">排量标准  {{carDetail.pEmission}}</text>-->
                    </div>
                    <div class="basic_info">
                        <text class="info_cont">行驶里程  {{carDetail.pKilometre}}万里</text>
                        <text class="info_cont">排量  {{carDetail.pGas}}</text>
                        <!--<text class="info_cont">国产进口  {{carDetail.pCountry}}</text>-->
                    </div>
                    <div class="basic_info">
                        <text class="info_cont">上牌日期  {{carDetail.pYear}}年{{carDetail.pMonth}}月</text>
                        <text class="info_cont">保险到期  {{carDetail.pInsurancedate}}</text>

                        <!--<text class="info_cont">牌照城市  {{carDetail.p1}}</text>-->
                    </div>
                </div>
                <text class="info_title">汽车配置</text>
                <div class="info_border">
                    <div v-for="(v, i) in carConfig" class="row">
                        <div v-for="(item, k) in v" class="color_value" :class="[item.isSelect?'select_back':'']">
                            <div class="light_config">
                                <image class="light_config_img" :src="item.cPic"></image>
                                <text class="color_name">{{item.cName}}</text>
                            </div>
                        </div>
                    </div>
                </div>
                <text class="info_title">车主描述</text>
                <div class="info_border">
                    <text class="owner_description">{{carDetail.pDetails}}</text>
                </div>
            </div>
            <div class="other_car_title" v-if="carDetail.selltype==2  || carDetail.selltype==0">
                <div class="other_car_left">
                    <text class="other_car_cont1">商家所有车源</text>
                </div>
                <div class="other_car_right" @click="buyCar">
                    <text>查看更多</text>
                </div>
            </div>
                <div v-if="moreStoreCarShow && (carDetail.selltype==2  || carDetail.selltype==0)">
                    <div v-for="(item,key) in tabStoreList">
                        <div class="content_other" @click="carDetailTo(item.pId)">
                            <image class="content_img" v-if="item.headImg" :src="item.headImg"></image>
                            <image class="content_img" v-else src="bmlocal://assets/acw/car.jpg"></image>
                            <div>
                                <text class="content_first">{{item.pAllname}}</text>
                                <div class="content_third">
                                    <text class="content_third_price">{{item.pPrice+"万元"}}</text>
                                    <text class="content_third_price">{{"首付："+Math.ceil((item.pPrice)*0.07)+"万元"}}</text>  <!--首付款7%-->
                                </div>
                                <div class="content_two">
                                    <text class="content_two1">{{item.pYear}}年</text>
                                    <text class="content_two2">{{item.pKilometre}}万公里</text>
                                    <text class="content_two1">{{item.p1}}</text>
                                </div>
                                <div class="content_four">
                                    <text class="content_four_text" v-if="item.selltype==0 || carDetail.selltype==2">3天无理由</text>
                                    <text class="content_four_text">{{item.selltype == 0 || carDetail.selltype==2 ? '2万公里质保': '可领取2万公里质保'}}</text>
                                    <text class="content_four_text" @click="callPhone(item.pTel)">{{item.selltype == 0 || item.selltype==2? '联系商家': '联系车主'}}</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <text class="owner_description" v-if="carDetail.selltype==2 || carDetail.selltype==0">该商家暂无其它车辆</text>
                </div>
            <div class="other_car_title">
                <div class="other_car_left">
                    <!--<text class="other_car_cont">更多</text>-->
                    <text class="other_car_cont1">同品牌车辆</text>
                    <!--<text class="other_car_cont">其他二手车</text>-->
                </div>
                <div class="other_car_right" @click="buyCar">
                    <text>查看更多</text>
                </div>
            </div>
            <div v-if="moreCarShow">
                <div v-for="(item,key) in tabList">
                    <div class="content_other" @click="carDetailTo(item.pId)">
                            <image class="content_img" v-if="item.headImg" :src="item.headImg"></image>
                            <image class="content_img" v-else src="bmlocal://assets/acw/car.jpg"></image>
                        <div>
                            <text class="content_first">{{item.pAllname}}</text>
                            <div class="content_third">
                                <text class="content_third_price">{{item.pPrice+"万元"}}</text>
                                <text class="content_third_price">{{"首付："+Math.ceil((item.pPrice)*0.07)+"万元"}}</text>  <!--首付款7%-->
                            </div>
                            <div class="content_two">
                                <text class="content_two1">{{item.pYear}}年</text>
                                <text class="content_two2">{{item.pKilometre}}万公里</text>
                                <text class="content_two1">{{item.p1}}</text>
                            </div>
                            <div class="content_four">
                                <text class="content_four_text" v-if="item.selltype==0 || carDetail.selltype==2">3天无理由</text>
                                <text class="content_four_text">{{item.selltype == 0 || carDetail.selltype==2 ? '2万公里质保': '可领取2万公里质保'}}</text>
                                <text class="content_four_text" @click="callPhone(item.pTel)">{{item.selltype == 0 || item.selltype==2? '联系商家': '联系车主'}}</text>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <wxc-lightbox
                ref="wxc-lightbox"
                height="800"
                :index="1"
                :image-list="imageList"
                @wxcLightboxOverlayClicked="lightboxOverlayClick"
                :show="show">
            </wxc-lightbox>
        </scroller>
    </div>
</template>
<script>
    import { WxcButton,wxcLightbox } from 'weex-ui';
    export default {
        components: { WxcButton,wxcLightbox },
        data () {
            return {
                token: '',
                statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
                carDetail: {},
                carConfig: {},
                imageList: [],
                show: false,
                isShowCollection: false,
                carId: '',
                collectionForm:{
                    carid:'',
                },
                collectionFormDelete:{
                    ids:[],
                },
                searchParam: {
                    p_brand: '',
                    page: 1,
                    limit: 10,
                    sort: 'p_id',
                    order: 'asc',
                },
                searchStoreParam: {
                    store_id: '',
                    page: 1,
                    limit: 10,
                    sort: 'p_id',
                    order: 'asc',
                },
                searchCollectionParam: {
                    carid: '',
                    page: 1,
                    limit: 10,
                    sort: 'id',
                    order: 'asc',
                    uid: ''
                },
                moreCarShow: false,
                moreStoreCarShow: false,
                userId: '',
            }
        },
        created () {
            let user = this.$storage.getSync('UserInfo')
            this.userId = user.id
            this.token = user.token
            this.$router.getParams().then(resData => {
                console.log(resData)
                this.carId = resData.carId
                this.getCarById(resData.carId)
                this.searchCollectionParam.carid = resData.carId;
                this.searchCollectionParam.uid = user.id;
                this.collectionList()
                this.addHistory(resData.carId)
            })
        },
        methods: {
            openLightBox () {
                this.show = true;
            },
            lightboxOverlayClick () {
                this.show = false;
            },
            // 返回
            back () {
                this.$router.back();
            },
            // 提示
            cantuse () {
                this.$notice.toast({ message: "开发中，敬请期待..."})
            },
            collectionList (){
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'buycar.cardetail.collection.list',
                    data: this.searchCollectionParam
                }).then(resData => {
                    // 成功回调
                    console.log('收藏信息', JSON.stringify(resData))
                    if (resData && resData.data && resData.data.items.length < 1) {
                        this.isShowCollection = false
                    } else {
                        this.collectionFormDelete.ids = [resData.data.items[0].id]
                        this.isShowCollection = true
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                })
            },
            collection (carid) {
                const vm = this;
                var userInfo = this.$storage.getSync('UserInfo');
                this.collectionForm.carid = carid
                this.token = userInfo.token;
                //判断是否已关注，如果已关注取消关注
                if(this.isShowCollection){
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'buycar.cardetail.collection.delete',
                        data: this.collectionFormDelete,
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        console.log(resData)
                        if (resData && resData.errno == 0) {
                            this.$notice.toast({ message: '取消收藏'})
                            this.collectionList()
                        } else {
                            this.$notice.toast({ message: '取消收藏失败'})
                        }
                    }, error => {
                        // 错误回调
                        console.log(error)
                    })
                }else{
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'buycar.cardetail.collection', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: this.collectionForm,
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        // this.isShowLoad = false;
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            this.$notice.toast({ message: '收藏成功'})
                            this.collectionList()
                        } 
                    }, error => {
                        // 错误回调
                        console.log(error)
                    })
                }
            },
            // 查询汽车详情
            getCarById (id) {
                const vm = this;
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'cars.getCarById', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        car_id: id
                    }
                }).then(resData => {
                    // 成功回调
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        this.carDetail = resData.data.car
                        // this.carDetail.bannerList = resData.data.car.pPics.split(';')
                        this.carDetail.bannerList =resData.data.car.pPics.split(';').filter(item => item!='null');
                        vm.carDetail.bannerList.forEach(item => {
                            vm.imageList.push({'src': item})
                        })
                        this.carDetail.headImg = resData.data.car.pPics.split(';')[1]
                        this.carConfig = this.configPack(resData.data.hlconfigList)
                        this.searchParam.p_brand = this.carDetail.pBrand
                        this.searchStoreParam.store_id=this.carDetail.p8
                        this.searchStoreParam.sellType=this.carDetail.selltype
                        this.getCarList(this.searchParam)
                        this.getStoreCarList(this.searchStoreParam)
                    } else {
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                })
            },
            //获取轮播图图片信息
            pPicsList(array){
                for(var i = 0 ;i<array.length;i++)
                {
                    if(array[i]=="null")
                    {
                        array.splice(i,1);
                        i= i-1;
                }else{
                            this.imageList.push({'src': array[i]})

                }
                }
                return array;
            },
            // 封装加装配置
            configPack (dataList) {
                let array = []
                let len = dataList.length
                for (let j = 0; j < len; j++) {
                    dataList[j].isSelect = false
                }
                for (let i = 0; i < len; i += 3) {
                    array.push(dataList.slice(i, i + 3))
                }
                switch (len % 3) {
                    case 1:
                        array[array.length - 1].push({})
                        array[array.length - 1].push({})
                        break;
                    case 2:
                        array[array.length - 1].push({})
                        break;
                    default:
                        break;
                }
                return array
            },
            bargain (id) {
                this.$router.open({
                    name: 'acw.buycar.bargain',
                    type: 'PUSH',
                    params: {carId: id}
                });
            },
            // 查询车辆列表
            getCarList (param) {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'cars.searchCar', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: param
                }).then(resData => {
                    // 成功回调
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        this.tabList = this.getCarPic(resData.data.items)
                        this.moreCarShow = true
                    } else {
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                    // this.$notice.toast({ message: "登录失败, 请重试"})
                })
            },
            // 查询当前商家车辆列表
            getStoreCarList (param) {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'cars.searchCar', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: param
                }).then(resData => {
                    // 成功回调
                    console.log("===================yk======================"+resData)
                    if(resData && resData.errno == 0){
                        this.tabStoreList = this.getCarPic(resData.data.items)
                        this.moreStoreCarShow = true
                    } else {
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                    // this.$notice.toast({ message: "登录失败, 请重试"})
                })
            },
            // 汽车图片
            getCarPic (list) {
                for (let i = 0, len = list.length; i < len; i++) {
                    list[i].headImg = list[i].pPics.split(';')[1]
                }
                return list
            },
            callPhone (phone) {
                this.$coms.call(phone)
            },
            // 汽车详情
            carDetailTo (id) {
                this.$router.open({
                    name: 'acw.buycar.cardetail',
                    type: 'PUSH',
                    params: {carId: id}
                });
            },
            // 买车
            buyCar () {
                this.$router.open({
                    name: 'acw.buycar.buycar',
                    type: 'PUSH',
                    params: {pBrand: this.carDetail.pBrand}
                });
            },
            // 发布买车
            addHistory (id) {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'history.add', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        'carid': id,
                    },
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }
                }).then(resData => {
                }, error => {
                })
            }
        }
    }
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.status-bar{
    width: 750px;
    height: 40px;
    background-color: #fff;
}
.header {
    height: 560px;
}
.headerIcon{
    font-size: 42px;
    color: #666;
    position: absolute;
    top: 10px;
    left: 10px;
}
.image {
    width: 750px;
    height: 560px;
}
.cont_title{
    background-color: #1E90FF;
    text-align: center;
    color: #fff;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
}
.cont_car_name{
    padding-left: 20px;
    margin: 10px;
    font-weight: bold;
}
.cont_car_date{
    padding-left: 20px;
    margin: 10px;
    color: #666;
    font-size: 18px;
}
.cont_price_border{
    border-top-style: dashed;
    border-top-color: #666;
    border-top-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #666;
    border-bottom-width: 1px;
}
.cont_price{
    flex-direction: row;
    align-items: flex-end;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
}
.nomal_word{
    font-size: 28px;
    color: #666;
    padding-left: 10px;
    padding-right: 10px;
}
.cont_car_price1{
    font-size: 56px;
    color: #FF2D2D;
    padding-bottom: -10px;
    padding-left: 10px;
    padding-right: 10px;
}
.cont_car_price2{
    font-size: 28px;
    color: #FF2D2D;
    padding-left: 10px;
    padding-right: 10px;
}
.under_staging{
    font-size: 28px;
    color: #1E90FF;
    padding-left: 10px;
    padding-right: 10px;
}
.car_base_info{
    flex-direction: row;
    border-top-color: #aaa;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: #aaa;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-bottom: 20px;
}
.base_info_lebal{
    align-items: center;
    flex: 1;
    margin-top: 20px;
    margin-bottom: 20px;
}
.left_line{
    border-left-color: #aaa;
    border-left-style: solid;
    border-left-width: 1px;
}
.base_info_text{
    font-size: 18px;
    color: #666;
}
.base_info_date{
    color: #666;
    margin-top: 5px;
}
.cont_phone_share{
    flex-direction: row;
    align-items: center;
}
.cont_pho{
    flex: 1;
}
.cont_phone_text{
    color: #1E90FF;
    font-size: 36px;
    padding-left: 20px;
    margin-bottom: 10px;
}
.cont_msg_num{
    margin-left: 20px;
    margin-bottom: 10px;
    color: #666;
}
.cont_share{
    flex: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.report_text{
    flex: 1;
    text-align: center;
    color: #1E90FF;
}
.share_text{
    flex: 1;
    text-align: center;
    color: #1E90FF;
}
.middl_button{
    flex-direction: row
}
.reservation{
    flex: 1;
    background-color: #fff;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
    font-size: 40px;
    color: #666;
    border-color: #1E90FF;
    border-style: solid;
    border-width: 1px;
}
.bargain_else{
    flex: 1;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
}
.bargain {
    flex: 1;
    background-color: #fff;
    border-color: #1E90FF;
    border-style: solid;
    border-width: 1px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
    font-size: 40px;
    color: #666;
}
.info_title{
    font-size: 36px;
    font-weight: bold;
    margin-left: 10px;
    background-color: #1E90FF;
    color: #fff;
    width: 200px;
    text-align: center;
    border-radius: 8px;
    padding: 10px;
}
.info_border{
    margin-left: 10px;
    margin-right: 10px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #aaa;
}
.basic_info{
    flex-direction: row;
    margin: 10px;
}
.info_cont{
    flex:1;
    font-size: 25px;
    color: #666;
    /*width: 280px;*/
}
.light_config{
    align-items: center;
    width: 150px;
}
.light_config_icon{
    font-size: 50px;
    color: #1E90FF;
}
.light_config_img{
    width: 50px;
    height: 50px;
}
.owner_description{
    color: #666;
    margin-top: 40px;
    margin-bottom: 40px;
}
.buy_car_area{
    background-color: #aaa;
    font-weight: bold;
    padding-top: 30px;
    padding-bottom: 30px;
}
.buy_car_img{
    height: 600px;
}
.other_car_title{
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    height: 70px;
    align-items: center;
}
.other_car_left{
    flex-direction: row;
    background-color: #fff;
    height: 70px;
    align-items: center;
}
.other_car_cont{
    font-size: 36px;
    padding-left: 10px;
    padding-right: 10px;
}
.other_car_cont1{
    color: #FF2D2D;
    font-size: 36px;
    padding-left: 10px;
    padding-right: 10px;
}
.other_car_right{
    flex-direction: row;
    width: 200px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: #aaa;
    border-radius: 5px;
    height: 50px;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}
.content_other{
    flex-direction: row;
    height: 280px;
    border-bottom-width:1px;
    border-color: #e0e0e0;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.content_first{
    width: 500px;
    color: #666;
    font-size: 30px;
    margin-bottom: 10px;
}
.content_img{
    height: 200px;
    width: 240px;
    margin-right: 10px;
}
.content_two{
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 20px;
}
.content_third{
    flex-direction: row;
}
.content_two1{
    color: #666;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
}
.content_two2{
    color: #666;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #666;
    border-right-style: solid;
    border-right-width: 2px;
    border-right-color: #666;
}
.content_third_price{
    font-size: 30px;
    color: #ff2d2d;
    margin-left: 20px;
    margin-right: 40px;
}
.content_four{
    /*width: 520px;*/
    flex-direction: row;
    justify-content: space-around;
    padding-top: 5px;
    padding-right: 5px;

}
.content_four_text{
    font-size: 25px;
    color: #666;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.color_value{
    flex-direction: row;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 15px;
    padding: 5px;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.row{
    flex-direction: row;
    /* height:80px; */
}
.color_name{
    color: #666;
    margin-left: 15px;
}
</style>
